<template>
  <div class="index">
    <!-- 头部 -->
    <itHead class="itHead">
      <span slot="left" class="iconfont iconnew left"></span>
      <span slot="center" class="center" @click="$router.push({path: '/search'})">
        <span class="iconfont iconsearch"></span>
        <span class="txt">搜索新闻</span>
      </span>
      <!-- 个人中心按钮 -->
      <span
        slot="right"
        class="iconfont iconwode right"
        @click="toPersonal"
      ></span>
    </itHead>

    <!-- 个人中心判断 弹出框 -->
    <!-- 放在itHead中看不到效果, 因为itHead只有那么点大 -->
    <van-dialog
      style="padding: 0 30px"
      v-model="toLogin_show"
      title="还未登录,是否去登录?"
      show-cancel-button
      confirmButtonColor="red"
      @confirm="toLogin"
    >
    </van-dialog>

    <!-- 个人中心按钮 End -->

    <!-- tab导航栏        swipeable(滑动切换)、sticky(粘性布局)、-->
    <van-tabs
      v-model="tab_active"
      background="#f9f9f9"
      swipeable
      sticky
      animated
    >
      <!-- 遍历栏目列表 -->
      <van-tab
        :key="index"
        v-for="(item, index) in category"
        :title="item.name"
      >
        <articleBlock
          :key="i"
          v-for="(v, k, i) in item.postList"
          :post="v"
        ></articleBlock>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
// 导入东西：
// 自定义：头部组件
import itHead from "@/components/itHead.vue";
// 导入文章模块组件
import articleBlock from "@/components/articleBlock.vue";

// 获取分类列表：get_category
// 获取文章列表：get_post
import { get_category, get_post } from "@/apis/post.js";

export default {
  // 注册组件
  components: {
    itHead,
    articleBlock,
  },

  // 数据：
  data() {
    return {
      tab_active: 1,
      category: [],
      toLogin_show: false,
    };
  },

  // 方法集：
  methods: {
    // 获取栏目分类列表
    async fn_getCategory() {
      //B    U    G                               B    U    G
      //  B    U    G                           B    U    G
      //    B    U    G                       B    U    G
      //      B    U    G                   B    U    G
      //        B    U    G               B    U    G
      //          B    U    G           B    U    G
      //            B    U    G       B    U    G
      //              B    U    G   B    U    G
      //                B    U    G   B    U
      //                  B    U    G   B
      //                    B    U    G
      //                      B    U
      //                        B 
      // 判断本地中能不能取到已有栏目：
      // if (localStorage.getItem("categoryList")) {
      //   this.category = JSON.parse(localStorage.getItem("notEdit"));
      //   JSON.parse(localStorage.getItem("categoryList")).map((v) => {
      //     this.category.push(v);
      //   });

      //   // 判断登录与否, 显示or不显示 关注栏目
      //   this.category.forEach((item, index) => {
      //     if (item.name == "关注") {
      //       let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      //       // 如果没有找到用户信息, 就删掉栏目中的关注
      //       if (!userInfo) {
      //         this.category.splice(index, 1);
      //       }
      //     }
      //   });
      // } else {
      let res = await get_category();
      // console.log(res);
      if (res.status == 200) {
        this.category = res.data.data.map((item) => {
          return {
            ...item,
            postList: [],
          };
        });

        // 判断登录与否, 显示or不显示 关注栏目
        this.category.forEach((item, index) => {
          if (item.name == "关注") {
            let userInfo = JSON.parse(localStorage.getItem("userInfo"));
            // 如果没有找到用户信息, 就删掉栏目中的关注
            if (!userInfo) {
              this.category.splice(index, 1);
            }
          }
        });
      }
      // }
    },

    // 获取分类的文章内容
    async fn_getPost(categoryId) {
      let res = await get_post(categoryId);
      // console.log(res);
      if (res.status == 200) {
        // console.log(res.data.data);

        // 将获取到的文章内容赋给对应的文章分类的postList
        this.category.forEach((item) => {
          if (item.id === categoryId) {
            item.postList = res.data.data;
          }
        });
      }
    },
    // 跳转个人中心
    toPersonal() {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      // 如果能获取到用户信息, 就进入个人中心页   否则就进入登录页面
      console.log(userInfo);
      // console.log(userInfo.id);
      if (userInfo) {
        this.$router.push({ path: "/personal/" + userInfo.id });
      } else {
        this.toLogin_show = true;
      }
    },
    // 去登录
    toLogin() {
      this.$router.push({ path: "/login" });
    },
  },

  // 钩子函数：页面加载完成

  // activated
  // mounted
  async activated() {
    // 调用：获取栏目分类列表
    await this.fn_getCategory();

    // console.log(this.category[this.tab_active].id);

    // 调用：获取分类的文章内容
    await this.fn_getPost(this.category[this.tab_active].id);

    document.querySelector(".van-sticky").onclick = (e) => {
      // 如果点击到的是栏目分类意外的地方，也就是＋
      if (e.target.className == "van-sticky") {
        this.$router.push({ path: "/editCategory" });
      }
    };
  },

  // 侦听器
  watch: {
    // 侦听：当前分类
    async tab_active() {
      // 调用：获取分类的文章内容
      await this.fn_getPost(this.category[this.tab_active].id);
    },
    // 侦听：栏目数据
    async category() {
      await this.fn_getPost(this.category[this.tab_active].id);
    },
  },
};
</script>


// 样式：
<style lang="less" scoped>
.itHead {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  background-color: rgb(255, 0, 0);
  // padding: 0 10px;

  .left {
    font-size: 60px;
    color: white;
    padding: 0 6px;
    // background-color: blue;
  }
  .center {
    display: block;
    width: 180 * 100vw / 360;
    height: 36px;
    line-height: 36px;
    border-radius: 20px;
    text-align: center;
    color: white;
    font-size: 15px;
    font-weight: normal;
    background: rgba(255, 255, 255, 0.397);
  }
  .right {
    display: block;
    // width: 60px;
    font-size: 26px;
    color: rgba(255, 255, 255, 0.664);
    line-height: 50px;
    // background-color: blue;
  }
}
/deep/.van-sticky {
  padding-right: 50px;
  background-color: rgb(249, 249, 249);
  &::before {
    content: "＋";
    display: block;
    position: absolute;
    top: 4px;
    right: 10px;
    font-size: 26px;
  }
}
</style>